var echarts = require("../../../../ec-canvas/echarts");

function initChart(canvas, width, height) {
  var nmu = [120, 132, 101, 134, 90, 230, 210];
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '7%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      position: function (point, params, dom, rect, size) {
        var x = 0;
        var y = 0; 
        var pointX = point[0];
        var pointY = point[1];
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = 5;
        } else { // 左边放的下
          x = pointX - boxWidth;
        }
        if (boxHeight > pointY) {
          y = 5;
        } else { // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: {
        show: false,       // 属性show控制显示与否，默认不显示
      },
      axisLabel: {
        formatter: function () {
          return "";
        }
      }
    },
    series: [{
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      data: nmu,
      markPoint: {
        data: [
          { name: '年最低', value: nmu[nmu.length - 1], xAxis: nmu.length - 1, yAxis: nmu[nmu.length - 1] }
        ]
      }
    }]
  };
  chart.setOption(option);
  return chart;
}

function initChars(canvas, width, height) {
  var sjoff = { "lr": [1231, 2131, 123, 31, 321, 543, 543, 534, 345, 543, 543, 543], "sz": [213, 432, 2332, 32, 32, 32, 546, 546, 654, 654, 456, 456]};
  var chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '7%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      },
      position: function (point, params, dom, rect, size) {
        var x = 0;
        var y = 0; 
        var pointX = point[0];
        var pointY = point[1];
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = 5;
        } else { // 左边放的下
          x = pointX - boxWidth;
        }
        if (boxHeight > pointY) {
          y = 5;
        } else { // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      }
    },
    axisTick: {
      show: true,       // 属性show控制显示与否，默认不显示
      interval: 'auto',
      // onGap: null,
      inside: false,    // 控制小标记是否在grid里 
      length: 0,         // 属性length控制线长
      lineStyle: {       // 属性lineStyle控制线条样式
        color: '#fff',
        width: 0
      }
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    legend: {
      data: ['Growth', 'Budget 2011', 'Budget 2012'],
      itemGap: 5
    },
    xAxis: [
      {
        type: 'category',
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: function () {
            return "";
          }
        }

      }
    ],
    dataZoom: [
      {
        show: true,
        start: 94,
        end: 100
      },
      {
        type: 'inside',
        start: 94,
        end: 100
      },
      {
        show: true,
        yAxisIndex: 0,
        filterMode: 'empty',
        width: 30,
        height: '80%',
        showDataShadow: false,
        left: '93%'
      }
    ],
    series: [
      {
        name: '收入',
        type: 'bar',
        data: sjoff.lr ,
        markPoint: {
          data: [
            { value: sjoff.lr[sjoff.lr.length - 1], xAxis: sjoff.lr.length - 1, yAxis: sjoff.lr[sjoff.lr.length - 1] }
         
          ],
          // symbolSize: [40, 40],
        }
      },
      {
        name: '支出',
        type: 'bar',
        data: sjoff.sz,
        markPoint: {
          data: [
            { value: sjoff.sz[sjoff.sz.length - 1], xAxis: sjoff.sz.length - 1, yAxis: sjoff.sz[sjoff.sz.length - 1] }

          ],
          // symbolSize: [40, 40],
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
      time:"2016-09",
    ec: {
      onInit: initChart
    },
    es: {
      onInit: initChars
    },
    dl: "ec",
    ztcolor:"#2b85e4",
    zt:"true",
    tp:"true"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  qhzt(event) {
    var lr = event.currentTarget.dataset.lr;
    this.setData({
      dl: lr
    })
  },
  djcs() {

  },
  xzyf(){
    var zt=this.data.zt;
    var tp = this.data.tp;
    this.setData({
      zt: !zt,
      tp: !tp
    })
  }
})